<template>
    <div class="user">
         <div class="head">
            <div class="headbg"></div>
             <div class="top">
                <div class="left" v-if="token!=null">
                    <img src="https://img2.baidu.com/it/u=4043495183,2954281760&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
                    <span>小赵</span> <span></span>
                </div>
                <div class="left" v-else>
                      <img src="../assets/img/nologin.webp" alt="">
                    <router-link tag="span" :to="'/login'" >请前往登录</router-link>
                </div>
                <div class="right">
                    <span>主页</span><img src="../assets/img/rightto.png" alt="">
                </div>
             </div>
             <div class="content">
                  <div class="video">
                    <h3>0</h3>
                     <p>视频</p>
                  </div>
                  <div class="video" @click="togz">
                    <h3>{{gzlength}}</h3>
                     <p>关注</p>
                  </div>
                  <div class="video">
                    <h3>0</h3>
                     <p>粉丝</p>
                  </div>
             </div>
         </div>
         <div class="show">
             <router-link tag="div" :to="'/myitem?index='+1" class="one">
                  <img src="../assets/img/vp.png" alt="">
                  <span>我的收藏</span>
             </router-link>
              <router-link tag="div" :to="'/myitem?index='+2" class="one">
                  <img src="../assets/img/xin.png" alt="">
                  <span>我的喜欢</span>
             </router-link>
              <router-link tag="div" :to="'/myitem?index='+0" class="one">
                  <img src="../assets/img/zz.png" alt="">
                  <span>我的手记</span>
             </router-link>
              <router-link tag="div" :to="'/myitem'" class="one">
                  <img src="../assets/img/qq.png" alt="">
                  <span>我的作品</span>
             </router-link>
         </div>
         <div class="serve">
              <h1>社区服务</h1>
             <div class="cc">
                 <div class="two">
                   <img src="../assets/img/课程.png" alt="">
                   <span>我的课程</span>
             </div>
             <div class="two">
                   <img src="../assets/img/素材.png" alt="">
                   <span>已购素材</span>
             </div>
             <div class="two">
                  <img src="../assets/img/_订单.png" alt="">
                   <span>订单管理</span>
             </div>
             <div class="two">
                   <img src="../assets/img/会员中心.png" alt="">
                   <span>会员中心</span>
             </div>
             </div>
         </div>
          <div class="more">
              <h1>发现更多</h1>
             <div class="cc">
                 <div class="two">
                   <img src="../assets/img/12.webp" alt="">
                   <span>实训营-驾驭短视频与直播</span>
             </div>
             <div class="two">
                   <img src="../assets/img/test.png" alt="">
                   <span>正版素材限时特惠</span>
             </div>
             <div class="two">
                  <img src="../assets/img/test.png" alt="">
                   <span>3天剪辑实战入门</span>
             </div>
             <div class="two">
                   <img src="../assets/img/12.webp" alt="">
                   <span>情感短视频制作全能班</span>
             </div>
             </div>
         </div>


         <tab-bar></tab-bar>
    </div>
</template>

<script>
import tabBar from "../components/tabBar.vue";
    export default {
        data() {
            return {
                token:null,
                gzlength:null,
            }
        },
        methods: {
            togz(){
                this.$router.push('/writenote')
            },
            getGzlist(){
             let temp=JSON.parse(window.localStorage.getItem('isgz'))
               if (temp!=null) {
              this.gzlength=temp.length
                
               }else{
                this.gzlength=0
               }
            }
        },
        components:{
            tabBar,
        },
        created() {
            this.token=JSON.parse(window.localStorage.getItem('token'))
            this.getGzlist()
        },
    }
</script>

<style lang="less" scoped>
.user{
    .head{
        width: 100%;
        position: relative;
         .headbg{
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 300px;
            
             background: linear-gradient(rgb(245, 212, 207),transparent );
            z-index: -1;
         }
        // background-color: aqua;
        .top{
             width: 85%;
             margin: 0 auto;
            padding-top: 40px;
             display: flex;
             justify-content: space-between;
             align-items: center;
            
             .left{
                display: flex;
                align-items: center;
                  img{
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        border: 2px solid #fff;
                        margin-right: 5px;
                   }
                
             }
             .right{
                display: flex;
                align-items: center;
                padding: 5px 8px ;
                border-radius: 15px;
                background-color: #fff;
                span{
                    display: block;
                    margin-right: 5px;
                    font-size: 12px;
                    padding-left: 5px;
                    font-weight: 600;
                }
                img{
                    width: 10px;
                    height: 10px;
                }
             }
        }
        .content{
           width: 90%;
           margin:  0 auto;
           margin-top: 30px;
             display: flex;
             justify-content: space-around;
             .video{
                text-align: center;
                p{
                    color: gray;
                    font-size: 12px;
                }
             }
        }
    }
    .show{
         width: 90%;
         margin: 10px auto;
         padding: 15px 5px;
         margin-top: 30px;
         display: flex;
         justify-content: space-around;
         background-color: #fff;
         border-radius: 10px;
        // box-shadow: 0px 0px 5px 0px #ccc;
         .one{
            text-align: center;
           img{
                width: 25px;
                height: 25px;
                margin: 0 auto;
                padding: 10px 0px;
            }
            span{
                font-size: 12px;
                color: gray;
            }
         }
    }
    .serve{
           width: 90%;
         margin: 10px auto;
         padding: 15px 5px;
         margin-top: 15px;
         background-color: #fff;
         border-radius: 10px;
        // box-shadow: 0px 0px 5px 0px #ccc;
        h1{
            font-size: 14px;
            text-indent: 10px;
            font-weight: 600;
        }
        .cc{
            display: flex;
            justify-content: space-around;
            padding: 5px 0px;
            .two{
                  text-align: center;
            img{
                width: 25px;
                height: 25px;
                margin: 0 auto;
                padding: 8px 0px;
            }
            span{
                font-size: 12px;
                color: gray;
            }
            }
        }
    }
      .more{
           width: 90%;
         margin: 10px auto;
         padding: 15px 5px;
         margin-top: 15px;
         background-color: #fff;
         border-radius: 10px;
         margin-bottom: 60px;
        
        h1{
            font-size: 14px;
            text-indent: 10px;
             font-weight: 600;
        }
        .cc{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            padding: 5px 0px;
            .two{
               
                  width: 45%;
                  padding: 5px 0px;
             img{
               width: 100%;
                height: 90px;
                border-radius: 5px;
                margin: 0 auto;
               
            }
            span{
                font-size: 12px;
                color: gray;
                display: block;
                padding: 5px 0px;
            }
            }
        }
    }
}
   
</style>